<style lang="less">
	page {
		background: #f5f3f6;
	}

	/* 轮播模块 */
	.xw-swiper {
		width: 750rpx;
		height: 475rpx;
		background: pink;
		transition: all .5s;
		 background-repeat: no-repeat;
		background-size: auto 375rpx;

		// 每一项
		.swiper-item {
			position: relative;
			width: 750rpx;
			height: 475rpx;
			color: #fff;

			// 图片r
			.opitem {
				position: absolute;
				width: 100rpx;
				height: 375rpx;
				top: 100rpx;
				left: 150rpx;
				font-size: 45rpx;
				font-family: '楷体';
				// background: pink;
			}
		}
	}

	/* 用户模块 */
	.xh-user {

		position: absolute;
		top: 410rpx;
		left: 10rpx;
		width: 730rpx;
		height: 160rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
		box-sizing: border-box;

		.xh-user-top {
			padding-top: 5px;
			width: 730rpx;
			height: 100rpx;
			// background: orange;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			// 图片
			.xh-img {
				display: block;
				width: 50rpx;
				height: 50rpx;
				border-radius: 30rpx;
				background: #fcf8f9;

			}

			// 用户信息
			.xh-msg {
				// flex-shrink: 0;
				width: 380rpx;
				height: 100rpx;

				// background: olivedrab;
				.msg-top {
					display: flex;
					justify-content: start;
					align-items: center;

					text {
						margin-left: 15rpx;
						padding: 2rpx 12rpx;
						background: #f6eefd;
						border-radius: 20rpx;
						color: #ac80e6;
						font-weight: 600;
						font-size: 12px;
					}
				}

				// 滑块
				.msg-raduis {
					width: 380rpx;
					height: 60rpx;
					// background: hotpink;
					display: flex;
					align-items: center;

					.radios {
						position: relative;
						width: 300rpx;
						height: 20rpx;
						background: #fcc2c6;
						border-radius: 30rpx;

						.lis {
							position: absolute;
							width: 100rpx;
							height: 20rpx;
							background: #fa3f46;
							border-radius: 30rpx;
						}
					}

					// 优惠劵
					.lvleng {
						margin-left: 10rpx;
						font-size: 16rpx;

						text {
							&:nth-child(1) {
								color: red;
							}
						}
					}
				}
			}

			// 优惠劵
			.xh-coupon {
				width: 200rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				text-align: center;
				font-size: 14px;

				view {
					width: 95rpx;
				}
			}
		}

		// 底部
		.xh-bottom {
			width: 750rpx;
			height: 80rpx;
			background: #fef5f8;
			display: flex;
			justify-content: start;

			.tsc {
				padding: 5rpx 20rpx;
				font-size: 24rpx;
				font-weight: 600;
			}

			.text {
				padding: 8rpx 20rpx;
				font-size: 22rpx;
			}

			.icons {
				margin-left: 300rpx;
				color: #ccc;
			}
		}
	}

	// 栏目
	.xh-banner {
		width: 730rpx;
		height: 550rpx;
		border-radius: 20rpx;
		margin: 130rpx auto 0rpx;
		background: #fff;
		overflow: hidden;

		.xh-banner-top {
			width: 700rpx;
			height: 400rpx;
			display: flex;
			justify-content: space-evenly;

			.banerimg {
				flex-shrink: 0;
				width: 380rpx;
				height: 400rpx;
				display: block;

			}
		}

		.xh-banner-bottom {
			position: relative;
			width: 730rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-evenly;

			navigator {
				display: block;
				flex-shrink: 0;
				width: 75.5rpx;
				height: 80rpx;
			}

			image {
				flex-shrink: 0;
				width: 75.5rpx;
				height: 80rpx;
			}
		}

		.banner-text {
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.banneritem {
				// margin: 0rpx 38rpx;
				font-size: 25rpx;
			}
		}
	}

	// 推荐模块
	.xh-recommend {
		width: 730rpx;
		height: 500rpx;
		margin: 30rpx auto 0rpx;
		background: #fbebee;
		border-radius: 30rpx;
		overflow: hidden;
		// padding: 10rpx;
		box-sizing: border-box;

		.recommend-hd {
			width: 730rpx;
			height: 100rpx;

			.recommend-title {
				width: 730rpx;
				height: 20rpx;
				margin-left: 10rpx;
				margin-top: 10rpx;
				font-family: '宋体';
				font-weight: 600;
			}

			.address {
				width: 730rpx;
				height: 20rpx;
				margin-top: 30rpx;
				margin-left: 50rpx;
				font-size: 23rpx;
			}
		}

		.recommend-bd {
			width: 730rpx;
			height: 400rpx;
			border: 0rpx;

			.more {
				width: 730rpx;
				height: 360rpx;
				// background: pink;
				display: flex;
				justify-content: start;
				align-items: center;
				overflow-x: auto;
				overflow-y: hidden;

				&::-webkit-scrollbar {
					display: none;
				}

				.more-item {
					flex-shrink: 0;
					width: 280rpx;
					height: 340rpx;
					margin: 0rpx 10rpx;
					border-radius: 20rpx;
					overflow: hidden;
					background: #fff;

					image {
						display: block;
						width: 220rpx;
						height: 220rpx;
						border-radius: 20rpx;
						margin: 20rpx auto 5rpx;
					}

					.more-title {
						height: 40rpx;
						font-size: 25rpx;
						text-align: center;
					}

					.more-content {
						position: relative;
						width: 280rpx;
						height: 40rpx;
						display: flex;
						justify-content: start;

						.more-price {
							margin-left: 20rpx;
							padding: 0rpx 10rpx 0rpx 10rpx;

						}

						.morebtn {
							position: absolute;
							right: 30rpx;
							bottom: 0rpx;
							padding: 0rpx 10rpx;
							border-radius: 100rpx;
							background: #e64340;
							text-align: center;
							color: #fff;
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}


	.howstitle {
		margin: 30rpx 0rpx 30rpx 10rpx;
		font-weight: 600;
	}

	.hows {
		width: 710rpx;
		height: 300rpx;
		margin: 0rpx auto 0rpx;

		image {
			width: 710rpx;
			height: 300rpx;
		}
	}
</style>
<template>
	<!-- 轮播模块 -->
	<swiper v-if="swiper?.length"  class="xw-swiper" autoplay circular @change="scrollswiper" indicator-dots
		indicator-color="#fff" indicator-active-color="#ccb7c4"
		:style=" `background:url(${swiper[index].imgs}); backgroundSize:750rpx no-repeat;`">
		<swiper-item class="swiper-item" v-for="item in swiper">
			<view class="opitem">{{item.title}}</view>
		</swiper-item>
	</swiper>
	<!-- 用户模块 -->
	<view class="xh-user">
		<!-- 头部 -->
		<view class="xh-user-top">
			<!-- 头像 -->
			<view class="xh-img">
				<image src="" mode=""></image>
			</view>
			<!-- 用户信息 -->
			<view class="xh-msg">
				<view class="msg-top">
					<view>195******43</view>
					<text>雪人大会员</text>
				</view>
				<view class="msg-raduis">
					<view class="radios">
						<div class="lis"></div>
					</view>
					<view class="lvleng"><text>111</text>/<text>10000</text></view>
				</view>
			</view>
			<!-- 优惠劵 -->
			<view class="xh-coupon">
				<view class="xh-cou coupon-left">
					<view>201</view>
					<view>雪王币</view>
				</view>
				<view class="xh-cou conupon-right">
					<view>0</view>
					<view>优惠劵</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="xh-bottom">
			<!-- 会员 -->
			<view class="tsc">
				会员特权
			</view>
			<!-- 文本 -->
			<view class="text">
				周四加加料日,1元小料卷
			</view>
			<!-- 图标 -->
			<view class="icons"> > </view>
		</view>
	</view>
	<!-- 栏目模块 -->
	<view class="xh-banner">
		<!-- 头部 -->
		<view class="xh-banner-top">
			<navigator  v-for="item in banner?.xue 
" @click="toorder">
				<image class="banerimg" :src="item.imgs" mode="aspectFill" @click="toorder"></image>
			</navigator>


		</view>
		<!-- 底部 -->
		<view class="xh-banner-bottom">
			<navigator v-for="item in banner?.banners" :url="item.path|| ''">
				<image :src="item.imgs" mode=""></image>
			</navigator>
		</view>
		<view class="banner-text">
			<view class="banneritem">周边商城</view>
			<view class="banneritem">进群有礼</view>
			<view class="banneritem">雪王魔法铺</view>
			<navigator class="banneritem" url="/pages/draw/draw">每日抽奖</navigator>
		</view>
	</view>



	<!-- 推荐模块 -->
	<view class="xh-recommend">
		<view class="recommend-hd">
			<view class="recommend-title">
				大家都在喝
			</view>
			<view class="address">蜜雪冰城 北京路店</view>
		</view>
		<view class="recommend-bd">
			<view class="more">
				<veiw class="more-item" v-for="item in more">
					<image :src="item.imgs" mode="aspectFill"></image>
					<view class="more-title">{{item.moreName}}</view>
					<viwe class="more-content">
						<view class="more-price">￥<text>{{item.morePirce}}</text></view>
						<view class="morebtn" type="warn"><text>+</text></view>
					</viwe>
				</veiw>
			</view>
		</view>
	</view>

	<!-- 广告模块 -->
	<view class="howstitle">甜蜜资讯</view>
	<swiper class="hows" autoplay circular>
		<swiper-item v-for="item in banner?.hows">
			<image :src="item.imgs" mode="aspectFill"></image>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getSwiper,
		getStyle,
		getmore,
	} from '../../api';
	const index = ref(0) //轮播图变化量
	const swiper = ref() //获取渲染
	const banner = ref() // 栏目
	const more = ref() //商品
	// 渲染
	const render = async () => {
		const res1 = await getSwiper() //轮播
		const res2 = await getStyle() //样式
		const res3 = await getmore()
		swiper.value = res1.data
		banner.value = res2.data
		more.value = res3.data
		// console.log(more.value)
	}
	render()

	const scrollswiper = (e) => {
		console.log(e.detail.current)
		index.value = e.detail.current
	}
	
	const toorder =()=>{
		uni.switchTab({
			url:'/pages/order/order',
		})
	}
	
</script>